<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG的描边动画</title>
    <style>
        .p{
            stroke: #f40;
            stroke-width: 5;
            stroke-dasharray: var(--l);
            stroke-dashoffset: var(--l);
            animation: stroke 2s forwards;
            fill: none;
            stroke-linecap: round;
        }
        @keyframes stroke {
            to{
                stroke-dashoffset: 0;
            }
        }
    </style>
</head>
<body>
    <svg class="icon" width="200" height="200" >
        <line class="p" x1="0" y1="50%" x2="100%" y2="50%" ></line>
        <circle class="p" cx="50%" cy="50%" r="30%" ></circle>
    </svg>
    <script>
        const paths = document.querySelectorAll('.icon .p');
        paths.forEach((path) => {
            const len = path.getTotalLength()+1;
            path.style.setProperty('--l',len);
        });
    </script>
</body>
</html>